<template>
    <div class="">

        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">下面是复习日历</van-divider>
        <div id="calendar">
            <van-row>
                <van-col span="6"><van-tag type="warning">今天还没有打卡哦！</van-tag></van-col>
                <van-col offset="2" span="13">
                    <van-pagination style="margin-top: 10px;" class="van-pagination-calendar" v-model="currentPage"
                        :total-items="50" :show-page-size="7" :items-per-page="7" :show-prev-button="false"
                        :show-next-button="false">
                        <template #next-text>
                            <van-icon name="arrow" />
                        </template>
                        <template #page="{ text }">{{ text == 1 ? "今天" : text }}</template>
                    </van-pagination>
                </van-col>
                <van-col span="2" offset="1">
                    <van-icon name="star-o" style="margin-top: 10px;" />
                </van-col>
            </van-row>
        </div>

        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">这是最新创建的单词本</van-divider>
        <div id="current_word_book">
            <van-card :tag="currentWordBook?.categoryName" :price="currentWordBook?.wordCount + '个单词'" currency="共"
                :title="currentWordBook?.name" thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                <template #tags>
                    <van-tag type="primary">发布日期：{{ currentWordBook?.createTime.substring(0, 10) }}</van-tag>
                </template>
                <template #desc>
                    <p>{{ currentWordBook?.origin }}</p>
                </template>
                <template #footer>
                    <van-button type="danger" size="mini">删除</van-button>
                    <van-button type="warning" size="mini" @click="readWords(currentWordBook?.id)">查看</van-button>
                </template>
            </van-card>
        </div>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">这是已经创建的单词本</van-divider>
        <div id="wordbooks">
            <!-- 搜索栏目 -->
            <SearchBar style="margin-top: -30px;" @search="confirmKeyWord" @chose-sort-manner="choseSortManner"></SearchBar>

            <!-- 展示一创建的单词本和新建单词本按钮 -->
            <!-- 在这里放一个分页查询插件 -->
            <van-pagination
            v-if="wordBookPages>1"
            v-model="currentWordBookPage" 
            :page-count="wordBookPages" 
            :items-per-page="wordBookNumberEachPage" 
            :show-page-size="showWordBookPage"
            :total-items="totalWordBookNumber"
            @change="searchWordBookByPage" />
            <van-row v-for="(items, index) in wordBookList" :index="index" style="margin-bottom: 10px;">

                <van-col span="6" v-if="index == 0">
                    <WordbookAdd @createWordbook="createWordBook">

                    </WordbookAdd>
                </van-col>

                <van-col span="6" v-for="(wordbook, index2) in items" :index="index2">
                    <WordbookItem :id="wordbook.id" :category="wordbook.categoryName" :name="wordbook.name"
                        :wordCount="wordbook.wordCount" :createTime="wordbook.createTime"
                        :backgroundImage="backgroundImage" @readWordbook="handleReadWordbook(wordbook.id)"
                        @modifyWordbook="modifyWordbook(wordbook.id)" />
                </van-col>
            </van-row>
        </div>

    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import axios from "axios"
import { onMounted, onBeforeMount } from "vue"
import router from "@/router"

// 自定义组件
import WordbookAdd from "@/components/WordbookAdd.vue"
import WordbookItem from "@/components/WordbookItem.vue"
import SearchBar from "@/components/SearchBar.vue"


const currentPage = ref(1);

const backgroundImage = 'https: //fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'; // 替换为实际的背景图片路径

import type { WordBook, Article, Category, Word } from '@/interface';
import { url } from "@/interface"

const wordBookList = ref<WordBook[][]>([]);
const currentWordBook = ref<WordBook>();

// 获取已经创建的单词本
const currentWordBookPage = ref(1);
const wordBookPages = ref(0);
const totalWordBookNumber = ref(0);
const wordBookNumberEachPage = ref(7);
const showWordBookPage = ref(5);

const keyWord = ref("");
const sortManner = ref("");

onBeforeMount(() => {
    console.log("初始化……");
    getCurrentWordbook();
    // getWordbooks();
    searchWordBookByPage();
});

const confirmKeyWord = (value:string) => {
    keyWord.value = value;
    searchWordBookByPage();
}

const choseSortManner = (value: string) => {
    sortManner.value = value;
    searchWordBookByPage();
}

// 分页查询，并且根据查询关键词以及排序方式进行查询
const searchWordBookByPage = () => {
    axios({
        method: 'get',
        url: url + '/wordBook/searchWordBookByPage',
        params: {
            pageNumber: currentWordBookPage.value,
            pageSize: wordBookNumberEachPage.value,
            keyWord: keyWord.value,
            sortManner:sortManner.value
        },
    }).then(resp => {
        const wordBookPage = resp.data;
        wordBookList.value = wordBookPage.wordBooks;
        wordBookPages.value = wordBookPage.wordBookPages;
        totalWordBookNumber.value = wordBookPage.totalWordBookNumber;
    })
}

// 初始化今日单词本和过去单词本数据
const getCurrentWordbook = () => {
    axios({
        method: 'get',
        url: url + '/wordBook/getCurrentWordBook'
    }).then(resp => {
        currentWordBook.value = resp.data;
    })
}

const getWordbooks = () => {
    axios({
        method: 'get',
        url: url + '/wordBook/getWordBooks'
    }).then(resp => {
        wordBookList.value = resp.data;
    })
}


//处理查看单词本详细信息请求
const handleReadWordbook = (id: BigInt) => {
    router.push("/readWords/" + id);
};



// 处理创建单词本请求
const createWordBook = (category: Category, article: Article, wordBook: WordBook) => {
    axios({
        url: url + "/wordBook/create",
        method: 'post',
        data: {
            category,article,wordBook
        },
        transformRequest: [function (data, headers) {
            // 对发送的 data 进行任意转换处理
            headers["Content-Type"] = "application/json";
            data.category.id = data.category.id.toString();
            data.article.id = data.article.id.toString();
            data.wordBook.id = data.wordBook.id.toString();
            return JSON.stringify(data);
        }],
    }).then(resp => {
        getCurrentWordbook();
        // getWordbooks();
        searchWordBookByPage();
    })
}

// 读单词
const readWords = (id: BigInt) => {
    router.push("/readWords/" + id);
}

const modifyWordbook = (id: bigint) => {
    router.push("/modifyWordbook/" + id);
}



</script>
<style scoped>
.van-pagination-calendar {

    --van-pagination-height: 16px;
    --van-pagination-font-size: 12px;
    --van-pagination-item-width: 14%;
}
</style>
